<template>
  <a-layout class="layout">
    <a-layout-header>
     <div class="logo" />
     <div style="float: right; color: white;">
      您好 &nbsp;<rocket-two-tone/> 欢迎来到用户意图系统
    </div>

      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">任务提交</a-menu-item>
        <a-menu-item key="2">其他模块</a-menu-item>

      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>User</a-breadcrumb-item>
        <a-breadcrumb-item>submit</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
        <h1 style="text-align: center" class="shifted-form"><rocket-two-tone/>
           任务提交
        </h1>
        <a-form
      ref="formRef"
      :model="formState"
      :label-col="{ span: 4}"
      :wrapper-col="{ span: 20 }"
      name="nest-messages"
      :validate-messages="validateMessages"
      @finish="onFinish"
      class="custom-form shifted-form"
  >
    <a-row :gutter="24">
      <a-col :span="24">
        <a-form-item :name="['user', 'name']" label="姓名"
                     :rules="[{ required: true, message: '请输入姓名!' ,trigger: 'blur'}]">
          <a-input v-model:value="formState.user.name" placeholder="请输入姓名" class="input-with-icon"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
            :name="['user','select']"
            label="任务类型"
            has-feedback
            :rules="[{ required: true, message: '请选择任务类型 ' ,trigger: 'change'}]"
        >
          <a-select v-model:value="formState.user.select"
                    placeholder="Please select one type you need ">
            <a-select-option value="plain">普通任务</a-select-option>
            <a-select-option value="智算大模型">智算大模型</a-select-option>
            <a-select-option value="智算人工智能">智算人工智能</a-select-option>
            <a-select-option value="泛算异地容灾">泛算异地容灾</a-select-option>
            <a-select-option value="AR/VR">AR/VR</a-select-option>
            <a-select-option value="数据处理和分析">数据处理和分析</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <a-form-item :name="['user', 'number']" label="所需要cpu的个数"
                     :rules="[{ type: 'number', min: 0, max: 99, message: 'Please enter a number between 0 and 99!' }]">
          <a-input-number v-model:value="formState.user.number" class="input-number" :min="0" :max="99" placeholder="请选择你所需要的cpu个数（整数） "/>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <a-form-item :name="['user','time']" label="开始时间" v-bind="config">
          <a-date-picker
              class="custom-date-picker"
              v-model:value="formState.user.time"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>

      </a-col>
      <a-col :span="24">
        <a-form-item :name="['user', 'code']" label="源代码">
          <a-textarea v-model:value="formState.user.code" placeholder="请输入你的代码" rows="4"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item :name="['user', 'data']" label="源数据">
          <a-textarea v-model:value="formState.user.data" placeholder="请输入你的数据" rows="4"/>
        </a-form-item>
      </a-col>
      <a-col :span="24">
         <a-form-item label="以附件形式上传">
      <a-form-item :name="['user', 'dragger']" no-style>
        <a-upload-dragger v-model:fileList="formState.user.dragger" name="files" action="/upload.do">
          <p class="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p class="ant-upload-text">点击或拖拽源数据到此处</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form-item>
      </a-col>
    </a-row>
    <a-form-item :wrapper-col="{ span: 24, offset: 0 }" class="text-right">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
      </div>
    </a-layout-content>

    <a-layout-footer style="text-align: center">
      用户路由系统
    </a-layout-footer>
  </a-layout>
</template>

<script>
import {defineComponent, reactive, ref} from 'vue';
import axios from 'axios';
import {nextTick} from 'vue';
import { notification} from "ant-design-vue";


export default defineComponent({
  setup() {
    const formRef = ref(null);
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const config = {
      rules: [{
        type: 'string',
        required: true,
        trigger: 'blur',
        message: 'Please select time!',
      }],
    };
    ``

    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };
    const formState = reactive({
      user: {
        name: '',
        number: undefined,
        code: '',
        time: '',
        data: '',
        select: '',

      },

    });
    const onFinish = async (values) => {
      try {
        await axios.post('http://127.0.0.1:5000/api/submit', formState.user);
        notification.success({message:"发送数据成功"});
        // 可选：处理成功后的逻辑，如清空表单、提示信息等
      } catch (error) {
        notification.error({message:"发送数据失败"})
        // 可选：处理错误逻辑
      }
    };

    return {
      formState,
      onFinish,
      layout,
      validateMessages,
      config,
      formRef,
      selectedKeys: ref(['1']),
    };
  },
});
</script>
<style scoped>
.custom-form {
  max-width: 700px;
  margin: 0 auto;
}


.input-with-icon::before {
  content: "\ea66"; /* 使用实际的图标Unicode或class */
  font-family: 'Ant Design Icons'; /* 确保图标字体被正确引入 */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #aaa;
  z-index: 1;
}

.input-number {
  width: 100%;
}

.text-right {
  text-align: right;
}

.shifted-form {
  margin-top: 50px; /* 根据需要调整数值来控制下移距离 */
}

.custom-date-picker {
  /* 调整日期选择器的宽度和高度 */
  width: 100%; /* 占满父元素宽度 */

  /* 更多样式根据需求添加 */
}
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}
</style>

